<template>
  <div class="home-wrap">
    <el-dialog :visible.sync="dialogVisible.show" center>
      <el-form :inline="true" :model="ruleform" ref="from" :rules="rules">
        <div class="con">
          <el-form-item label="序列号" prop="sn">
            <el-input
              v-model="ruleform.sn"
              autocomplete="off"
              style="width:580px;"
              disabled
            ></el-input>
          </el-form-item>
          <br />
          <el-form-item label="别称" prop="alias">
            <el-input v-model="ruleform.alias" placeholder></el-input>
          </el-form-item>
          <el-form-item label="主源" prop="reg_type">
            <el-select
              v-model="ruleform.reg_type"
              placeholder="请选择"
              disabled
            >
              <el-option label="盒子ONVIF" value="0"></el-option>
              <el-option label="RTSP" value=" 10"></el-option>
              <el-option label="WS-FLV" value="11"></el-option>
              <el-option label="文件" value="2"></el-option>
              <el-option label="CMS-V9" value="30"></el-option>
              <el-option label="SDK直连" value="4"></el-option>
              <el-option label="盒子SP" value="41"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主源地址" prop="stream_from">
            <el-input
              v-model="ruleform.stream_from"
              placeholder
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="通道数" prop="chns">
            <el-input v-model.number="ruleform.chns" placeholder></el-input>
          </el-form-item>
          <el-form-item label="厂家" prop="factory_type">
            <el-select
              v-model="ruleform.factory_type"
              placeholder="请选择"
              disabled
            >
              <el-option label="匿名厂家" value="0"></el-option>
              <el-option label="汉邦" value="23"></el-option>
              <el-option label="海康" value="2"></el-option>
              <el-option label="大华" value="25"></el-option>
              <el-option label="宇视" value="33"></el-option>
              <el-option label="美电贝尔" value="32"></el-option>
              <el-option label="ONVIF" value="100"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="登录账户" prop="login_user">
            <el-input v-model="ruleform.login_user" placeholder></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="login_pwd">
            <el-input v-model="ruleform.login_pwd" placeholder></el-input>
          </el-form-item>
          <el-form-item label="设备地址" prop="domain">
            <el-input v-model="ruleform.domain" placeholder></el-input>
          </el-form-item>
          <el-form-item label="映射端口" prop="port_map">
            <el-input v-model.number="ruleform.port_map" placeholder></el-input>
          </el-form-item>
          <el-form-item label="应用端口" prop="port_app">
            <el-input v-model.number="ruleform.port_app" placeholder></el-input>
          </el-form-item>
          <el-form-item label="所属部门" prop="department">
            <el-input
              v-model.number="ruleform.department"
              placeholder
            ></el-input>
          </el-form-item>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitModify('from')"
              >修改</el-button
            >
            <el-button type="warning" plain @click="onReset('from')"
              >重置</el-button
            >
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
export default {
  name: "audit",
  props: {
    sn: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Object,
      default() {
        return {
          show: false,
        };
      },
    },
  },
  data() {
    var checkNoChinese = (rule, value, callback) => {
      if (value) {
        if (new RegExp(/^[\u4E00-\u9FA5]+$/).test(value)) {
          callback(new Error("请不要输入中文！"));
        } else {
          callback();
        }
      }
      callback();
    };
    var checkNumber = (rule, value, callback) => {
      if (value != "") {
        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) == false) {
          callback(new Error("请输入大于0的数字"));
        } else {
          callback();
        }
      } else {
        callback();
      }
      callback();
    };
    return {
      ruleform: {
        sn: "",
        alias: "",
        reg_type: "",
        stream_from: "",
        chns: "",
        factory_type: "",
        login_user: "",
        login_pwd: "",
        domain: "",
        port_map: "",
        port_app: "",
        department: "",
      },
      rules: {
        sn: [{ required: false, message: "", trigger: "blur" }],
        alias: [{ required: false, message: "", trigger: "blur" }],
        reg_type: [{ required: false, message: "", trigger: "blur" }],
        stream_from: [{ required: false, message: "请输入", trigger: "blur" }],
        chns: [
          { required: false, message: "必须为数字值" },
          { validator: checkNumber, trigger: "blur" },
        ],
        factory_type: [{ required: false, message: "", trigger: "blur" }],
        login_user: [
          { required: false, message: "", trigger: "blur" },
          { validator: checkNoChinese, trigger: "blur" },
        ],
        login_pwd: [
          { required: false, message: "", trigger: "blur" },
          { validator: checkNoChinese, trigger: "blur" },
        ],
        domain: [
          { required: false, message: "", trigger: "blur" },
          { validator: checkNoChinese, trigger: "blur" },
        ],
        port_map: [
          { required: false, message: "必须为数字值" },
          { validator: checkNumber, trigger: "blur" },
        ],
        port_app: [
          { required: false, message: "必须为数字值" },
          { validator: checkNumber, trigger: "blur" },
        ],
        department: [
          { required: true, message: "请输入所属部门", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    sn: {
      handler(newVal) {
        this.ruleform.sn = newVal;
        this.initShow();
      },
      immediate: true,
    },
  },
  mounted() {
    //  this.initShow();
  },
  methods: {
    //初始的时候显示,
    initShow() {
      postData("/adminweb/device/get", {
        sn: this.sn,
        with_location: 0,
      })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            let datas = res.datas;
            this.ruleform.sn = datas.sn;
            this.ruleform.alias = datas.alias;
            this.ruleform.stream_from = datas.stream_from;
            this.ruleform.chns = datas.chns;
            this.ruleform.login_user = datas.login_user;
            this.ruleform.login_pwd = datas.login_pwd;
            this.ruleform.domain = datas.domain;
            this.ruleform.port_map = datas.port_map;
            this.ruleform.port_app = datas.port_app;
            this.ruleform.department = datas.department;

            if (datas.reg_type == 0) {
              this.ruleform.reg_type = "盒子ONVIF";
            } else if (datas.reg_type == 10) {
              this.ruleform.reg_type = "RTSP";
            } else if (datas.reg_type == 11) {
              this.ruleform.reg_type = "WS-FLV";
            } else if (datas.reg_type == 2) {
              this.ruleform.reg_type = "文件";
            } else if (datas.reg_type == 30) {
              this.ruleform.reg_type = "CMS-V9";
            } else if (datas.reg_type == 4) {
              this.ruleform.reg_type = "SDK直连";
            } else if (datas.reg_type == 41) {
              this.ruleform.reg_type = "盒子SP";
            } else if (datas.reg_type == 7) {
              this.ruleform.reg_type = "SIP";
            } else if (datas.reg_type == 81) {
              this.ruleform.reg_type = "环保局";
            }
            if (datas.factory_type == 0) {
              this.ruleform.factory_type = "匿名厂家";
            } else if (datas.factory_type == 23) {
              this.ruleform.factory_type = "汉邦";
            } else if (datas.factory_type == 2) {
              this.ruleform.factory_type = "海康";
            } else if (datas.factory_type == 25) {
              this.ruleform.factory_type = "大华";
            } else if (datas.factory_type == 33) {
              this.ruleform.factory_type = "宇视";
            } else if (datas.factory_type == 32) {
              this.ruleform.factory_type = "美电贝尔";
            } else if (datas.factory_type == 100) {
              this.ruleform.factory_type = "ONVIF";
            }
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //修改 提交
    submitModify(formName) {
      var that = this;
      that.$refs[formName].validate((valid) => {
        if (that.ruleform.department == "") {
        //   that.$message.error("请先输入，必填项");
          return false;
        }
        if (valid) {
          postData("/adminweb/device/update", {
            sn: that.ruleform.sn,
            alias: that.ruleform.alias,
            chns: that.ruleform.chns,
            login_user: that.ruleform.login_user,
            login_pwd: that.ruleform.login_pwd,
            domain: that.ruleform.domain,
            port_map: that.ruleform.port_map,
            port_app: that.ruleform.port_app,
            department: that.ruleform.department,
          })
            .then((res) => {
              if (res.code == 0) {
                that.$message.success("修改成功！");
                that.$emit("refreshList");
              } else {
                that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch((res) => {
              that.$message.error(res.code + "，" + res.msg);
            });
        } else {
          that.$message.error("error");
          return false;
        }
      });
    },
    // 重置
    onReset(val) {
      //this.$emit("reset", true);
      this.$refs[val].resetFields();
    },
  },
};
</script>

<style scoped>
.home-wrap >>> .el-dialog__wrapper {
}

.home-wrap >>> .el-dialog{
    margin-top:25vh!important;
}
</style>
